<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 100px;
				height: 100px;
				background: #8A2BE2;
				opacity: 1;
			}
		@keyframes bounceIn{
			0%{transform: scale(0); }
			50%{transform: scale(1.5); }
			100%{transform: scale(1); }
		}
		
		@keyframes bounceOut{
			0%{transform: scale(1); }
			50%{transform: scale(1.5); }
			100%{transform: scale(0); }
		}
		.fade-enter-active{animation: bounceIn 2s; }
		.fade-leave-active{animation: bounceOut 2s;}
		
		</style>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click="show=!show">切换动画</button>
			<transition name="fade">
			    <div class="box" v-show="show"></div>
			</transition>
			
		</div>
	<script>
		var vm=new Vue({
			el:"#app",
			data:{
				show:false
			}
			
		})	
			
			
			
		</script>
		
		<!-- 用法同CSS过渡。区别是动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。
		
		在使用animate的时候，同样的也有上面的四个类。
		但是，实现动画的方式不一样。
		
		回忆，animate本身是如何使用的？
		需要使用@keyframes先定义一些动画。动画就包含了起始和终点状态。
		然后使用animate实现动画。 -->
	</body>
</html>
